<script>
//应用——幻灯片模式
export default {
  name: 'SlideFilm',
  data() {
    return {
      newslide: {},
      slideList: [
        {
          id: 't001',
          name: '智慧国土2',
          status: 0,
          alterTime: '2018/01/01',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't002',
          name: '智慧国土2',
          status: 1,
          alterTime: '2017/01/02',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't003',
          name: '智慧国土3',
          status: 0,
          alterTime: '2017/01/03',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't004',
          name: '智慧国土4',
          status: 1,
          alterTime: '2017/01/04',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't005',
          name: '智慧国土5',
          status: 1,
          alterTime: '2017/01/05',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't006',
          name: '智慧国土6',
          status: 0,
          alterTime: '2017/01/06',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't007',
          name: '智慧国土7',
          status: 1,
          alterTime: '2017/01/07',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't008',
          name: '智慧国土8',
          status: 0,
          alterTime: '2017/01/08',
          img: '~assets/dashboard/logo.png',
        },
        {
          id: 't009',
          name: '智慧国土9',
          status: 1,
          alterTime: '2017/01/09',
          img: '~assets/dashboard/logo.png',
        },
      ],
    };
  },
  methods: {
    addslidefilm() {
      /*  this.$router.push('/newslidefilm'); */
      this.newslide = {
        id: this.slideList.length + 1,
        name: '智慧国土2',
        status: 0,
        alterTime: '2018/01/01',
        img: '~assets/dashboard/logo.png',
      };
      this.slideList.push(this.newslide);
    },
    gotoApp() {
      this.$router.push('/app');
    },
    previewPage(item) {
      this.$router.push('/preview/' + item.id);
    },
  },
};
</script>
<template>
  <div class="slidefilm">
    <Layout>
      <Sider
        :style="{background: '#ddd',border:'1px solid #000'}"
        hide-trigger
      >
        <Card
          v-for="item in slideList"
          :key="item.id"
          class="itemCard"
        >
          <div style="text-align:center">
            <img :src="item.img">
            <h4>{{ item.name }}</h4>
            <div style="text-align:right;">
              <a title="上传封面">
                <Icon
                  size="20"
                  type="camera"
                  color="#000"
                />
              </a>
              <Modal width="400">
                <p slot="header">
                  <span>封面</span>
                </p>
                <div style="text-align:center">
                  <Upload
                    ref="upload"
                    :max-size="5120"
                    action="#"
                    type="drag"
                  >
                    <div style="padding: 0">
                      <Icon
                        type="ios-cloud-upload"
                        size="40"
                        style="color: #3399ff"
                      />
                      <p>点击或将图片拖拽到这里上传</p>
                    </div>
                  </Upload>
                </div>
                <div slot="footer">
                  <Button
                    size="large"
                    style="boeder:0"
                    @click="gotoApp"
                  >返回</Button>
                  <Button
                    size="large"
                    style="background-color:#2d8cf0;color:white;border:0"
                  >确定</Button>
                </div>
              </Modal>
              <a
                title="预览"
                @click.stop="previewPage(item)"
              >
                <Icon
                  size="20"
                  type="eye"
                  color="#000"
                />
              </a>
              <a title="删除">
                <Icon
                  size="20"
                  type="trash-a"
                  color="#000"
                />
              </a>
            </div>
          </div>

        </Card>
        <Card class="itemCard">
          <Button @click="addslidefilm">
            <Icon
              type="plus"
              size="60"
            />
          </Button>
        </Card>
      </Sider>
      <Content :style="{padding: '0 50px',border:'1px solid #000'}">
        <div>
          <Tabs
            value="page"
            style="float:left"
          >
            <TabPane
              label="页面"
              name="page"
            />
            <TabPane
              label="图表"
              name="imgchart"
            />
          </Tabs>
          <div class="opbutton">
            <Button
              size="large"
              style="boeder:0"
              @click="gotoApp"
            >返回</Button>
            <Button
              size="large"
              style="background-color:#2d8cf0;color:white;border:0"
            >确定</Button>
            <Button
              size="large"
              style="background-color:#2d8cf0;color:white;border:0"
            >预览</Button>
          </div>
        </div>
        <div class="editorslide">
          <router-view/>
        </div>
      </Content>
    </Layout>
    </Row>
  </div>
</template>


<style lang="less" scoped>
.slidefilm {
  height: calc(~'100vh - 48px');
  background: #ddd;
  text-align: center;
  .k-layout {
    background: #ddd;
    height: 100%;
  }
  .k-layout.k-layout-has-sider {
    margin-left: 25px;
    padding-top: 25px;
  }
  .itemCard {
    margin: 5px;
  }
  .page {
    padding-top: 10px;
    color: #dddddd;
    .k-tabs {
      float: right;
    }
  }
  .slide {
    height: calc(~'100vh - 40px');
  }
  .editorslide {
    height: calc(~'100vh - 140px');
    background: #000;
    margin-top: 40px;
  }
  .opbutton {
    float: right;
  }
}
</style>
<style scoped>
.slidefilm >>> .k-layout-sider-children {
  overflow-y: scroll;
}
</style>
